<template>
  <div class="module">
    <MTitle ref="title" icon="gjtj" @search="initData"></MTitle>
    <MBox>
      <MTabs class="m-tabs" :list="list" :activeIndex="activeIndex" @change="tabChange"></MTabs>
      <div class="content-box">
        <div class="animate-icon">
          <!-- 外侧圆环div -->
          <div class="flat circle-outer">
            <div class="content"></div>
          </div>
          <!-- 内侧圆环div -->
          <div class="flat circle-inner">
            <div class="content"></div>
          </div>
          <div class="work">
            <div class="content">标题</div>
          </div>
          <div class="aaaaaa">
            <div class="circle-ball1">1111</div>
            <div class="circle-ball2">2222</div>
            <div class="circle-ball3">3333</div>
            <div class="circle-ball4">4444</div>
          </div>
        </div>
      </div>
    </MBox>
  </div>
</template>

<script>
import MTitle from '../base-com/m-title/m-title'
import MBox from '../base-com/m-box/m-box'
import MTabs from '../base-com/m-tabs/m-tabs'

import { warningStatistics } from '@/api/warnings'
import { shipMixin } from '../../mixins/mixin'

export default {
  mixins: [shipMixin],
  components: {
    MTitle,
    MBox,
    MTabs
  },
  data() {
    return {
      activeIndex: 0,
      list: [
        {
          name: '告警类型',
          value: 'type',
        },
      ],
    }
  },
  methods: {
    shipChange() {
      this.initData();
    },
    initData() {
      const searchData = this.$refs.title.getForm()
      searchData.shipId = this.shipId
      warningStatistics(searchData).then(res => {
        const result = res?.result?.type || []
        console.log(result)
        this.init()
      })

    },
    tabChange(index) {
    },
    init() {

    }
  }
}
</script>

<style scoped lang="scss">
.content-box {
  width: 100%;
  height: 100%;
}
.animate-icon {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 压缩div高度，将正圆变为椭圆 */
.flat {
  transform: scaleY(0.45);
}
.work {
  position: absolute;
  color: #f4fefc;
  font-size: 22px;
}
.circle-outer {
  position: relative;
  bottom: 0;
}
.circle-outer .content {
  width: 200px;
  height: 200px;
  border-radius: 100px;
  /* 圆锥渐变 */
  // background: conic-gradient(fuchsia, pink, orange, gold, snow);
  background: conic-gradient(#89b8e4, #23d7e2, #5aa3e7, #00f9f6, #0edee7);
  /* 将圆中心“掏空”变成圆环 */
  --mask: radial-gradient(closest-side, transparent 90%, black 90%);
  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);
  animation: spin 4s linear infinite;
}
.circle-inner {
  position: absolute;
}
.circle-inner .content {
  width: 150px;
  height: 150px;
  border-radius: 75px;
  background: conic-gradient(#e1e1ea 40%, #d5e0e0 72%, #7f8888 88%, #9d9db6);
  // background: conic-gradient(blue 40%, teal 72%, cyan 88%, blue);
  --mask: radial-gradient(closest-side, transparent 94%, black 94%);
  -webkit-mask-image: var(--mask);
  mask-image: var(--mask);
  animation: spin-r 4s linear infinite;
}
.circleInfo {
  position: absolute;
}
.circle-ball1 {
  position: absolute;
  animation: animX 6s cubic-bezier(0.7, 0, 0.3, 1) -3s infinite alternate,
  animY 6s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate,
  spin-ball 12s cubic-bezier(0.36, 0, 0.64, 1) 0s infinite alternate;
}
.circle-ball2 {
  position: absolute;
  animation: animX 6s cubic-bezier(0.7, 0, 0.3, 1) -6s infinite alternate,
  animY 6s cubic-bezier(0.36, 0, 0.64, 1) -3s infinite alternate,
  spin-ball 12s cubic-bezier(0.36, 0, 0.64, 1) -3s infinite alternate;
}
.circle-ball3 {
  position: absolute;
  animation: animX 6s cubic-bezier(0.7, 0, 0.3, 1) -9s infinite alternate,
  animY 6s cubic-bezier(0.36, 0, 0.64, 1) -6s infinite alternate,
  spin-ball 12s cubic-bezier(0.36, 0, 0.64, 1) -6s infinite alternate;
}
.circle-ball4 {
  position: absolute;
  animation: animX 6s cubic-bezier(0.7, 0, 0.3, 1) -12s infinite alternate,
  animY 6s cubic-bezier(0.36, 0, 0.64, 1) -9s infinite alternate,
  spin-ball 12s cubic-bezier(0.36, 0, 0.64, 1) -9s infinite alternate;
}
[class^='circle-ball'] {
  background: red;
  color: #fff;
}
</style>
